<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" rel="stylesheet">
  <link th:href="@{backed/js/layui.css}" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">


  <!--    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>-->
  <!--    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->
  <style>
    .adduser:hover {
      color: #00aced;
    }

  </style>
</head>

<body class="fix-header fix-sidebar card-no-border">

<div class="preloader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>

<div id="main-wrapper">

  <div th:replace="~{commons/commons::topbar}"></div>


  <div th:replace="~{commons/commons::sidebar}"></div>

  <div class="page-wrapper">

    <div class="container-fluid">

      <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
          <h3 class="text-themecolor m-b-0 m-t-0">用户模块</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)" th:href="@{/index}">首页</a></li>
            <li class="breadcrumb-item active">用户</li>
          </ol>
        </div>

      </div>

      <div class="row">
        <!-- column -->
        <div class="col-lg-12">
          <div class="card">
            <div class="card-block" id="userModel">
              <h3 class="card-title" style="display: inline-block; width: 60%">User Model</h3>
              <!--              <input />-->
              <el-input type="text" @blur="selectKeyWord" style="max-height: 28px;max-width: 200px"
                        placeholder="搜索..." v-model:value="keyword" lay-on="test-tips-color"></el-input>
              <br>
              <span class="card-subtitle adduser" style="cursor: pointer"
                    lay-on="test-page-title" @click="getUsername">Add User <code>.table</code>
              </span>

              <!--     添加用户弹框         -->
              <div id="addUser">
                <center>
                  <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                      <label class="layui-form-label">账号</label>
                      <div class="layui-input-block">
                        <input type="text" name="username" v-model:value="addUserData.username" autocomplete="off"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input" disabled/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">昵称</label>
                      <div class="layui-input-block">
                        <input type="text" name="nickname" autocomplete="off" v-model:value="addUserData.nickname"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input"/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">密码</label>
                      <div class="layui-input-block">
                        <input type="password" name="password" v-model:value="addUserData.password" placeholder="请输入"
                               lay-verify="required"
                               autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">电话</label>
                      <div class="layui-input-block">
                        <input id="validate-phone" type="tel" name="phone" v-model:value="addUserData.phone"
                               placeholder="请输入"
                               lay-verify="required|phone" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">邮箱</label>
                      <div class="layui-input-block">
                        <input id="validate-phone" type="email" name="email" v-model:value="addUserData.email"
                               placeholder="email@qq.com"
                               lay-verify="required|phone" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <input type="button" class="layui-btn" @click="addUser" value="确认"/>
                      <input type="button" class="layui-btn layui-btn-primary" @click="clearAddUser" value="重置">
                    </div>
                  </form>
                </center>
              </div>

              <!--     修改用户弹框         -->
              <div id="updateUser">
                <center>
                  <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                      <label class="layui-form-label">账号</label>
                      <div class="layui-input-block">
                        <input type="text" name="username" v-model:value="updateUserData.username" autocomplete="off"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input" disabled/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">昵称</label>
                      <div class="layui-input-block">
                        <input type="text" name="nickname" autocomplete="off" v-model:value="updateUserData.nickname"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input"/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">密码</label>
                      <div class="layui-input-block">
                        <input type="password" name="password" v-model:value="updateUserData.password"
                               placeholder="请输入"
                               lay-verify="required"
                               autocomplete="off" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <label class="layui-form-label">邮箱</label>
                      <div class="layui-input-block">
                        <input id="validate-phone" type="email" name="email" v-model:value="updateUserData.email"
                               placeholder="email@qq.com"
                               lay-verify="required|phone" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <input type="button" class="layui-btn" @click="updateUser" value="确认"/>
                      <input type="button" class="layui-btn layui-btn-primary" @click="clearUpdateUser" value="重置">
                    </div>
                  </form>
                </center>
              </div>

              <div class="table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th>#</th>
                    <th>NickName</th>
                    <th>UserName</th>
                    <th>Email</th>
                    <th>RegisterDate</th>
                    <th>Operate &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;<span style="cursor: pointer" >delete</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in dataList" :key="item.id">
                    <td>{{ index + 1 + page.pageIndex * page.pageSize }}</td>  <!-- 保持编号的自增 -->
                    <td>{{ item.nickname }}</td>
                    <td>{{ item.username }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.registerDate }}</td>
                    <td>
                      <button class="layui-btn layui-btn-normal" lay-on="test-page-title"
                              @click="updateBox(dataList[index])">修改
                      </button>
                      <button class="layui-btn layui-btn-danger" @click="deleteUser(dataList[index])">删除</button>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <!--                           @size-change="handleSizeChange"-->
                <el-pagination @current-change="handleCurrentChange" :current-page=1
                               :page-size="page.pageSize" layout="total, prev, pager, next, jumper"
                               :total="page.count">
                </el-pagination>

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div th:replace="~{commons/commons::footer}"></div>

  </div>

</div>

<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<script th:src="@{/login/js/layui.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<script th:src="@{backed/js/content/table-basic.js}"></script>
<script th:replace="~{commons/commons::topbar_vue}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>
<script th:inline="javascript">
  var adduser_layui;
  var updateuser_layui;
  const userModel = new Vue({
    el: "#userModel",
    data: {
      //1、查询数据渲染
      dataList: null,

      //2、用户添加数据
      addUserData: {
        username: "",
        nickname: "",
        password: "",
        phone: "",
        email: ""
      },

      //3、用户添加数据
      updateUserData: {
        username: "",
        nickname: "",
        password: "",
        email: ""
      },

      //4、分页参数
      page: {
        //4.1页码
        pageIndex: 0,
        //4.2每页显示条数
        pageSize: 8, //设置每页显示条数
        //4.3分页查询条件
        user: {
          username: "",
          nickname: "",
          email: ""
        },
        //4.4记录总条数
        count: 0,
      },
      //5、查询关键字
      keyword: ''

    },
    mounted: function () {
      //加载页面时执行的
      //弹框隐藏
      $("#addUser").hide();
      $("#updateUser").hide();
      //数据渲染
      this.pageSelection(this.page)
    },
    methods: {
      //1、请求数据接口
      pageSelection(data) {
        let that = this;
        pageSelectApi(data).done(function (res) {
          if (res.code === 200) {
            console.log(res.data.count)
            userModel.dataList = res.data.list;
            userModel.page.count = res.data.count;
          } else {

            //没查询到
            that.$message({
              message: '未找到记录',
              type: 'warning',
              center: true
            })
          }
        })
      },

      //2 当前页码变化发送事件，请求接口数据
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.pageIndex = val - 1;
        //发送请求
        this.pageSelection(this.page)
      },

      //3、搜索框移出事件，请求接口数据
      selectKeyWord() {
        //清空页码
        this.page.pageIndex=0;
        this.page.user.username = this.keyword;
        this.page.user.nickname = this.keyword;
        this.page.user.email = this.keyword;
        this.pageSelection(this.page)
      },

      //4-1、添加弹框打开,获取账号信息
      getUsername() {
        //4-1-1调用查询账号接口
        let that = this;
        //4-1-2 账号被使用才获取新的
        if (that.addUserData.username === "") {
          getUsernameApi().done(function (res) {
            //得到回调的账号，显示在弹框内
            console.log("执行");
            if (res.code === 200) {
              console.log(res.data);
              that.addUserData.username = res.data;
            }
          })
        }
        //4-1-3 弹框打开
        layui.util.on('lay-on', {
          'test-page-title': function () {
            adduser_layui = layer.open({
              type: 1,
              area: ['440px', '410px'], // 宽高
              title: 'Add User', // 不显示标题栏
              closeBtn: 0,
              shadeClose: true, // 点击遮罩关闭层
              content: $('#addUser'),
            });
          },
        })
      },

      //4-2 清除弹框内容
      clearAddUser() {
        let addUserData = this.addUserData
        addUserData.nickname = "";
        addUserData.password = "";
        addUserData.phone = "";
        addUserData.email = "";
      },

      //4-3 添加信息发送
      addUser() {
        let that = this;
        //表单验证
        if (formValidation(that.addUserData,"add")) {
          addUserApi(that.addUserData).done(function (res) {
            if (res.code === 200) {
              //关闭弹框
              layer.close(adduser_layui);
              //清空内容
              that.addUserData.username = "";
              that.clearAddUser();
              //提示信息
              that.$message({
                message: '用户成功添加',
                type: 'success',
                center: true
              });
              //刷新界面
              that.pageSelection(that.page)
            } else {
              that.$message({
                message: '网络繁忙',
                type: 'warning',
                center: true
              });
            }
          })
        }
      },

      //5、修改弹框被打开、回显账号信息 data是对应的数据
      updateBox(data) {
        console.log(data)
        let that = this;
        //5.1 打开弹框
        layui.util.on('lay-on', {
          'test-page-title': function () {
            updateuser_layui = layer.open({
              type: 1,
              area: ['440px', '360px'], // 宽高
              title: 'Update User', // 不显示标题栏
              closeBtn: 0,
              shadeClose: true, // 点击遮罩关闭层
              content: $('#updateUser'),
            });
          },
        })
        //5.2 数据渲染到弹框
        that.updateUserData.username = data.username;
        that.updateUserData.nickname = data.nickname;
        that.updateUserData.password = data.password;
        that.updateUserData.email = data.email;
      },

      //5-1、点击重置
      clearUpdateUser() {
        let up_data = this.updateUserData;
        up_data.nickname = "";
        up_data.password = "";
        up_data.email = "";
      },

      //5-2、修改信息发送
      updateUser() {
        let that = this;
        if (formValidation(that.updateUserData,"update")) {
          updateUserApi(that.updateUserData).done(function (res) {
            if (res.code === 200) {
              //5-2-1关闭弹框
              layer.close(updateuser_layui);
              //5-2-2清空内容
              that.updateUserData.username = "";
              that.clearUpdateUser();
              //5-2-3提示信息
              that.$message({
                message: '用户成功修改',
                type: 'success',
                center: true
              });
              //5-2-4刷新界面
              that.pageSelection(that.page)
            }else {
              that.$message({
                message: '网络繁忙',
                type: 'warning',
                center: true
              });
            }
          })

        }
      },

      //6、删除用户
      deleteUser(data) {
        let that=this;
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除用户: '),
            h('i', { style: 'color: teal' }, data.nickname)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {

              //调用删除接口
              deleteUser(data.userId).done(function (res){
                if(res.code === 200){
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = '执行中...';
                  setTimeout(() => {
                    done();
                    setTimeout(() => {
                      instance.confirmButtonLoading = false;
                    }, 300);
                  }, 600);
                }else{
                  that.$message({
                    type: 'warning',
                    message: '网络繁忙'
                  });
                }
              })
            } else {
              done();
            }
          }
        }).then(action => {
          //刷新记录
          that.clearT(that)
          that.pageSelection(that.page)
          that.$message({
            type: 'success',
            message: '成功删除一条记录！'
          });
        });
      },

      //7、清空条件
      clearT(that){
        that.page.pageIndex=0;
        that.page.user.username="";
        that.page.user.nickname="";
        that.page.user.email="";
      }
    }
  })
  //搜索框小提示
  layui.use(function(){
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {
      'test-tips-color': function(){
        layer.tips('失去焦点自动检索', this, {
          tips: [1, '#1e9fff']
        });
      },
    })
  });
</script>


</body>

</html>
<script setup lang="ts">
</script>